<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header @refresh="refresh" />
    <div class="page-main">
      <div class="page-main-query all-search">
        <FilterBar>
          <template #left>
            <el-select
              v-model="query.userId"
              placeholder="筛选操作用户"
              filterable
              remote
              :remote-method="appRemote"
              @change="changeUser"
            >
              <el-option
                
                v-for="(item, index) in userList"
                :label="item.userName"
                :value="item.id"
                :key="index"
              />
              <el-pagination
                small
                background
                @current-change="getUsersList"
                :page-size="userPage.size"
                layout="prev, pager, next"
                :total="userPage.total"
              >
              </el-pagination>
            </el-select>
            <!-- <el-input class="input" placeholder="搜索操作用户" v-model="query.userName" @input="queryChange" clearable /> -->
            <OrgCascader
            class="org-cascader"
              placeholder="筛选所属部门"
              v-model="query.orgId"
              :clearable="true"
              @query-change="queryChange"
            />
            <el-date-picker class="date-picker" style="width: 250px" v-model="query.daterange" type="daterange" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" @change="queryChange" clearable :shortcuts="shortcuts" />
            <el-button class="filterbar-button" type="primary" @click="reset">重置</el-button>
          </template>
        </FilterBar>
      </div>
      <!-- 表格 -->
      <DynamicTable class="table-container" :total="total" v-model:current="page.current" v-model:size="page.size"
        :data="list" :columns="tableColumns" @pagination="getList" />
    </div>
  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive, computed } from "vue";
import Header from "@/components/Header.vue";
import DynamicTable from "@/components/DynamicTable";
import FilterBar from "@/components/FilterBar.vue";
import { useListManage } from "@/hooks";
import OrgCascader from "@/components/OrgCascader/";
import { getLogs,getUsers } from "@/api/system";
import {parseTime} from "@/utils"
export default defineComponent({
  name: "AdaptationAuth",
  components: {
    Header,
    DynamicTable,
    FilterBar,
    OrgCascader
  },
  setup(props, { emit, slots }) {
    const userPage = reactive({
      userName: null,
      current: 1,
      size: 20,
      total:0
    })
    const userList = ref([])
    const getUsersList = async() => {
      const res = await getUsers(userPage)
      userList.value = res.data.list
      userPage.total = res.data.total
    }
    const changeUser = () => {
      appRemote('')
      queryChange()
    }
    const appRemote = (value) => {
      userPage.userName = value;
      getUsersList();
    };

    const query = reactive({
      userName: null,
      orgName: null,
      startDate:null,
      endDate:null,
      daterange: null
    });
    let {
      page,
      list,
      total,
      refresh,
      listLoading,
      getList,
      queryChange,
      reset
    } = useListManage(props, emit, {
      getItems: getLogs,
      query: query,
      getDetail: null,
      deleteItem: null,
    });
    const shortcuts = computed(() => {
      const end = new Date(new Date(new Date().toLocaleDateString()).getTime()-1);
      return [
      {
        text: '近7天',
        value: () => {
         
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          return [start, end]
        },
      },
      {
        text: '近14天',
        value: () => {

          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
          return [start, end]
        },
      },
      {
        text: '近1个月',
        value: () => {

          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 31)
          return [start, end]
        },
      },
      {
        text: '近3个月',
        value: () => {
 
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          return [start, end]
        },
      },
      {
        text: '近半年',
        value: () => {

          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
          return [start, end]
        },
      },
      {
        text: '近一年',
        value: () => {
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 366)
          return [start, end]
        },
      },
    ]
    })
    const tableColumns = ref([
      {
        label: "操作用户",
        key: "userName",
        minWidth: "100px",
      },
      {
        label: "所属组织",
        key: "orgName",
        minWidth: "200px",
      },
      {
        label: "操作内容",
        key: "operate",
        minWidth: "200px",
      },
      {
        label: "操作时间",
        minWidth: "150px",
        render: (h, {row}) => (
          <span>{parseTime(row.operateDate)}</span>
        )
      }
    ]);

    onMounted(() => {
      getList();
    });

    return {
      // 列表数据
      page,
      list,
      total,
      listLoading,
      query,
      tableColumns,
      queryChange,
      getList,
      refresh,
      reset,
      shortcuts,

      getUsersList,
      appRemote,
      changeUser,
      userList,
      userPage
    };
  },
});
</script>
<style scoped>
.filterbar-button {
  margin-left:10px;
  vertical-align: -0;
}
:deep(.org-cascader){
  margin:0 10px;
}
:deep(.date-picker)  {
  vertical-align: -2px;
}
</style>